<!-- 门店选择弹出窗 -->
<template>
	<div>
		<el-dialog title="模板选择" v-model="state.isShowDialog"  center class="borderRadius10" width="1180">
			<div class="cropper-warp">
                <el-table :data="state.tableData.data" v-loading="state.tableData.loading" style="width: 100%">
                    <el-table-column prop="tplId" label="ID" show-overflow-tooltip width="90"></el-table-column>
                    <el-table-column prop="typeName" label="模板类型" show-overflow-tooltip></el-table-column>
                    <el-table-column prop="tplName" label="模板名称" show-overflow-tooltip></el-table-column>
                    <el-table-column label="商品规格" show-overflow-tooltip>
                        <template #default="scope">
                            <span v-for="(item, index) in scope.row.specList" :key="index">{{ item.specName }}、</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="商品属性" show-overflow-tooltip>
                        <template #default="scope">
                            <p v-for="(item, index) in scope.row.specList" :key="index">
                                <span v-for="(item1, index1) in item.specItemList" :key="index1">{{ item1.specItemName }}、</span>
                            </p>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作">
                        <template #default="scope">
                            <el-button text type="primary"
                                @click="useTpl(scope.row)">应用模板</el-button>
                            <el-button  text type="primary"
							@click="onOpenAdd('edit', scope.row)">编辑</el-button>
                            <el-button  text type="primary" @click="onRowDel(scope.row)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <el-row justify="end">
                    <el-col :span="24" class="flex-end-center">
                        <el-pagination @size-change="onHandleSizeChange" @current-change="onHandleCurrentChange" class="mt15"
                            :pager-count="5" :page-sizes="[10, 20, 30]" v-model:current-page="state.tableData.param.pageNum"
                            background v-model:page-size="state.tableData.param.pageSize"
                            layout="total, sizes, prev, pager, next, jumper" :total="state.tableData.total">
                        </el-pagination>
                    </el-col>
                </el-row>
			</div>
		</el-dialog>
		<addSpecsDialog ref="addSpecsDialogRef" @refresh="getTableData()" />
	</div>
</template>

<script setup lang="ts" name="cropper">
import { reactive, ref, defineAsyncComponent } from 'vue';
import { ElMessageBox, ElMessage } from 'element-plus';
import { templateList,templateDelete } from '/@/api/commodity';
const addSpecsDialog = defineAsyncComponent(() => import('/@/views/commodity/goodspecsTemp/components/addSpecsDialog.vue'));
// 定义变量内容
const addSpecsDialogRef = ref();
// 定义变量内容
const emit = defineEmits(['selectSpecFun'])
// 定义变量内容
const state = reactive({
	isShowDialog: false,
	type: 1,
    tableData: {
		data: [],
		total: 0,
		loading: false,
		param: {
			keyWords: '',
			pageNum: 1,
			pageSize: 10,
		},
	},
});

// 打开弹窗
const openDialog = ( type: number) => {
    state.type = type;
    // 获取模板列表
	getTableData();
	state.isShowDialog = true;
};

// 获取模板列表
const getTableData = async () => {
	state.tableData.loading = true;
	let params = {
        typeId: state.type,
		pageNum: state.tableData.param.pageNum,
		pageSize: state.tableData.param.pageSize,
	}
	const { results } = await templateList(params);
	state.tableData.loading = false;
	state.tableData.data = results.records
	state.tableData.total = results.total;
}

// 打开修改角色弹窗
const onOpenAdd = (type: string, row: Object) => {
	addSpecsDialogRef.value.openDialog(type, JSON.parse(JSON.stringify(row)));
}

const useTpl = (row: any) => {
    const tmpData = [] as Array<any>;
    row.specList.map((item:any) => {
        const childItem = [] as Array<any>;
        item.specItemList.map((itemx:any) => {
            childItem.push({
                name: itemx.specItemName
            })
        })
        tmpData.push({
            name:item.specName,
            childItem:childItem
        })
    })
    emit('selectSpecFun', tmpData);
	closeDialog();
}

// 删除模板
const onRowDel = (row: any) => {
	ElMessageBox.confirm(`此操作将删除该规格模板，是否继续?`, '提示', {
		confirmButtonText: '确认',
		cancelButtonText: '取消',
		type: 'warning',
	}).then(async () => {
		state.tableData.loading = true;
		const { results } = await templateDelete(row.tplId);
		ElMessage.success('删除成功');
		state.tableData.loading = false;
		getTableData();
	}).catch(() => { });
};

// 关闭弹窗
const closeDialog = () => {
	state.isShowDialog = false;
};

// 分页改变
const onHandleSizeChange = (val: number) => {
	state.tableData.param.pageSize = val;
	getTableData();
};

// 分页改变
const onHandleCurrentChange = (val: number) => {
	state.tableData.param.pageNum = val;
	getTableData();
};


// 暴露变量
defineExpose({
	openDialog,
});
</script>

<style scoped lang="scss">
</style>
